<template>
  <el-select v-model="data.value" clearable class="m-0" :multiple="multiple" :placeholder="placeholder" size="small"
    @change="advancedSelect">
    <el-option v-for="item in options" :key="getId(item)" :label="getLabel(item)" :value="getId(item)">
    </el-option>
  </el-select>
</template>

<script lang="ts">
import { defineComponent, ref, watch, reactive, PropType } from 'vue'
import { ObjectType } from 'typings/interfaces'

export default defineComponent({
  components: {},
  emits: {
    changeValue: null, // 选中的值抛出方法(单选)
  },
  props: {
    options: { // 下拉框数据
      type: Object,
      required: true,
    },
    placeholder: { // 下拉框提示语
      type: String,
    },
    selectValue: { // 下拉框展示的值
      type: String,
    },
    multiple: {  // 是否多选  false 单选  true 多选
      type: Boolean
    }
  },
  model: {
    prop: 'value',
    event: 'changes',
  },
  setup(props, { emit }) {
    const data = reactive({
      value: props.selectValue
    })

    watch(
      () => props.selectValue,
      (newVal, oldVal) => {
        console.log(newVal)
        data.value = newVal
      }
    )

    const dataList = ref(props.options)
    const advancedSelect = (value) => {
      let list = JSON.parse(JSON.stringify((dataList.value)))
      console.log(list)
      for (let key in list) {
        if (value == list[key].name || value == list[key].id) {
          // console.log(list[key])
          emit('changeValue', list[key])
        }
        if (value == list[key].belongingCode || value == list[key].belongingUnit) {
          // console.log(list[key])
          emit('changeValue', list[key])
        }
      }
    }

    const getId = (item) => {
      let id = item.id ? item.id : item.belongingCode
      return id
    }

    const getLabel = (item) => {
      let value = item.class_name ? item.class_name : item.belongingUnit
      return value
    }

    return {
      advancedSelect,
      // selectValue,
      data,
      getId,
      getLabel
    }
  },
})
</script>

<style scoped lang="scss"></style>
